<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table id="friends_table"> 
        <thead>
            <tr>
                <td>序号</td>
                <td>名字</td>
                <td>家乡</td>
                <td>未来想去的城市</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <div id="container"></div>
    <ul id="list">

    </ul>
    <script>
        const friends = [
            {index:1,name:'喻顺武',hometown:'南昌',city:'杭州'},
            {index:2,name:'叶加起',hometown:'上饶',city:'成都'},
            {index:3,name:'徐毅',hometown:'丰城',city:'杭州'},
            {index:4,name:'喻顺武',hometown:'南昌',city:'杭州'}
            
        ];
        // 数组的每一项（对象）
       const newFriends = friends.map(function(friend){
            // console.log(friend);
            return `
                <tr>
                    <td>${friend.index}</td>
                    <td>${friend.name}</td>
                    <td>${friend.hometown}</td>
                    <td>${friend.city}</td>
                </tr>
                `
        })
         console.log(newFriends,'---');
        // document.getElementById('friends_table').querySelector('tbody').innerHTML = newFriends.join('')
        // const qiang = {
        //     name: '刘国强',
        //     age: 18,
        //     job: '女职员鼓励师',
        //     city: '重庆',
        //     blo: '写代码就像吃火锅一样，要爽'
        // }
        const users = ['夏侯欣','饶乐','王飞'];
        // let html='';
        // for(let i=0;i<user.length;i++ ){
            // html += ''
        // }
        // users.forEach(function(user,index){
    //    
    // document.getElementById('container').innerHTML = users.map(function(user,index){
    //     // console.log(user.index);
    //     return `<li>${user}</li>`
    // }).join('')
        
        //  document.getElementById('container').innerHTML = html
        //  `
        //  <div>${qiang.name}</div>
        //  <div>${qiang.age}</div>
        //  <div>${qiang.job}</div>
        //  <div>${qiang.name}</div>
        //  <div>${qiang.name}</div>
        //  `
        //  document.getElementById('list').innerHTML= 
        //  `
        //  <li>${users[0]}</li>
        //  <li>${users[1]}</li>
        //  <li>${users[2]}</li>
        //  `
        //  '<div>'+ qiang.name + '</div>'
        // +'<div>'+ qiang.age + '</div>'
        // +'<div>'+ qiang.job + '</div>'
        // +'<div>'+ qiang.city + '</div>'
        // +'<div>'+ qiang.blo + '</div>'
    </script>
</body>
</html>